<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>{cms>$tpl.wxname}</title>
<base href="." />
<meta name="viewport"
	content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<link
	href="{cms>:RES}/css/allcss/cate{cms>$tpl.tpltypeid}_{cms>$tpl.color_id}.css"
	rel="stylesheet" type="text/css" />
<link href="{cms>:RES}/css/108/iscroll.css" rel="stylesheet"
	type="text/css" />
<link rel="stylesheet" href="{cms>:RES}/css/flash/css/plugmenu.css">
<style>
#cate9 {
	background: url(http://bcs.duapp.com/baeimg/1joroYYvQI.jpg) no-repeat
		scroll 0 bottom #530337; /*修改图片路径*/
	background-size: 100% 100%;
}

#cate9 .catemenu li {
	border-top: 1px solid rgba(0, 0, 0, 0.17);
}

#cate9 .catemenu a {
	border-right: 1px solid rgba(0, 0, 0, 0.17);
	color: #FFFFFF;
}

#cate9 .catemenu {
	background-color: rgba(255, 255, 255, 0.14);
}

.copyright {
	color: rgba(255, 255, 255, 0.48);
}
</style>
<script src="{cms>:RES}/css/108/iscroll.js" type="text/javascript"></script>
<script type="text/javascript">
            var myScroll;

            function loaded() {
                myScroll = new iScroll('wrapper', {
                    snap: true,
                    momentum: false,
                    hScrollbar: false,
                    onScrollEnd: function () {
                        document.querySelector('#indicator > li.active').className = '';
                        document.querySelector('#indicator > li:nth-child(' + (this.currPageX+1) + ')').className = 'active';
                    }
                });
 
 
            }

            document.addEventListener('DOMContentLoaded', loaded, false);
        </script>

</head>

<body id="cate9">
	<div class="banner">
		<div id="wrapper">
			<div id="scroller">
				<ul id="thelist">
					<volist name="flash" id="so">
					<li><p>{cms>$so.info}</p>
						<a href="{cms>$so.url}"><img src="{cms>$so.img}" /></a></li>
					</volist>
				</ul>
			</div>
		</div>
		<div id="nav">
			<div id="prev"
				onclick="myScroll.scrollToPage('prev', 0,400,3);return false">&larr;
				prev</div>
			<ul id="indicator">
				<volist name="flash" id="so">
				<li<if condition="$i eq 1">class="active"</if> >{cms>$i}</li>
				</volist>

			</ul>
			<div id="next"
				onclick="myScroll.scrollToPage('next', 0);return false">next
				&rarr;</div>
		</div>
		<div class="clr"></div>
	</div>

	<div id="insert1"></div>

	<div class="catemenu">
		<ul>
			<volist name="info" id="vo">
			<li><a href="<if condition="$vo['url'] eq ''">{cms>:U('Wap/Index/lists',array('classid'=>$vo['id'],'token'=>$vo['token']))}<else />{cms>$vo.url|htmlspecialchars_decode}</if>">{cms>$vo.name}
			</a></li>
			</volist>

			<div class="clr"></div>
		</ul>
	</div>

	<script>


            var count = document.getElementById("thelist").getElementsByTagName("img").length;	


            for(i=0;i<count;i++){
                document.getElementById("thelist").getElementsByTagName("img").item(i).style.cssText = " width:"+document.body.clientWidth+"px";

            }

            document.getElementById("scroller").style.cssText = " width:"+document.body.clientWidth*count+"px";


            setInterval(function(){
                myScroll.scrollToPage('next', 0,400,count);
            },3500 );

            window.onresize = function(){ 
                for(i=0;i<count;i++){
                    document.getElementById("thelist").getElementsByTagName("img").item(i).style.cssText = " width:"+document.body.clientWidth+"px";

                }

                document.getElementById("scroller").style.cssText = " width:"+document.body.clientWidth*count+"px";
            } 

        </script>
	<div id="insert2"></div>
	<div style="display: none"></div>


	<div class="plug-div">
		<div class="plug-phone">
			<div class="plug-menu themeStyle"
				style="background: {cms&gt;$homeInfo.plugmenucolor">
				<span class="close"></span>
			</div>
			<volist name="plugmenus" id="vo">
			<div class="themeStyle plug-btn plug-btn{cms>$i} close"
				style="background: {cms&gt;$homeInfo.plugmenucolor">
				<a href="{cms>$vo.url}"> <span
					style="background-image: url({cms>:RES}/css/flash/images/img/{cms>$vo.name}.png);"></span>
				</a>
			</div>
			</volist>
			<div class="plug-btn plug-btn5 close"></div>
		</div>
	</div>
	<script src="{cms>:RES}/css/flash/js/zepto.min.js"
		type="text/javascript"></script>
	<script src="{cms>:RES}/css/flash/js/plugmenu.js"
		type="text/javascript"></script>
	<div class="copyright">
		<if condition="$iscopyright eq 1"> {cms>$homeInfo.copyright} <else />
		{cms>$siteCopyright} </if>
	</div>
</body>
</html>